<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>俄罗斯方块</title>
    <link rel="stylesheet" href="style.css">
    <style>
        /* 这里可以添加一些内联样式 */
    </style>
</head>

<body>
    <div id="game-board"></div>
    <script>
        // 游戏板的行数和列数
        const ROWS = 20;
        const COLS = 10;

        // 初始化游戏板数组
        const board = [];
        for (let i = 0; i < ROWS; i++) {
            board[i] = new Array(COLS).fill(0);
        }

        // 方块形状
        const SHAPES = [
            [[1, 1, 1, 1]],
            [[1, 1], [1, 1]],
            [[1, 1, 0], [0, 1, 1]],
            [[0, 1, 1], [1, 1, 0]],
            [[1, 1, 1], [0, 1, 0]],
            [[1, 1, 1], [1, 0, 0]],
            [[1, 1, 1], [0, 0, 1]]
        ];

        // 当前方块
        let currentShape;
        let currentX;
        let currentY;

        // 生成新方块
        function newShape() {
            const randomIndex = Math.floor(Math.random() * SHAPES.length);
            currentShape = SHAPES[randomIndex];
            currentX = Math.floor(COLS / 2) - Math.floor(currentShape[0].length / 2);
            currentY = 0;
        }

        // 检查方块是否可以移动到指定位置
        function canMove(shape, x, y) {
            for (let i = 0; i < shape.length; i++) {
                for (let j = 0; j < shape[i].length; j++) {
                    if (shape[i][j]) {
                        const newX = x + j;
                        const newY = y + i;
                        if (newX < 0 || newX >= COLS || newY >= ROWS || (newY >= 0 && board[newY][newX])) {
                            return false;
                        }
                    }
                }
            }
            return true;
        }

        // 将方块固定到游戏板上
        function fixShape() {
            for (let i = 0; i < currentShape.length; i++) {
                for (let j = 0; j < currentShape[i].length; j++) {
                    if (currentShape[i][j]) {
                        board[currentY + i][currentX + j] = 1;
                    }
                }
            }
        }

        // 检查并消除满行
        function checkLines() {
            for (let i = ROWS - 1; i >= 0; i--) {
                if (board[i].every(cell => cell)) {
                    // 移除满行
                    board.splice(i, 1);
                    // 在顶部添加新的空行
                    board.unshift(new Array(COLS).fill(0));
                }
            }
        }

        // 更新游戏板显示
        function updateBoard() {
            const gameBoard = document.getElementById('game-board');
            gameBoard.innerHTML = '';
            for (let i = 0; i < ROWS; i++) {
                for (let j = 0; j < COLS; j++) {
                    const cell = document.createElement('div');
                    cell.classList.add('cell');
                    if (board[i][j] || (currentShape && i >= currentY && i < currentY + currentShape.length && j >= currentX && j < currentX + currentShape[i - currentY].length && currentShape[i - currentY][j - currentX])) {
                        cell.classList.add('filled');
                    }
                    gameBoard.appendChild(cell);
                }
            }
        }

        // 方块下落
        function moveDown() {
            if (canMove(currentShape, currentX, currentY + 1)) {
                currentY++;
            } else {
                fixShape();
                checkLines();
                newShape();
                if (!canMove(currentShape, currentX, currentY)) {
                    // 游戏结束
                    alert('游戏结束！');
                }
            }
            updateBoard();
        }

        // 键盘事件处理
        document.addEventListener('keydown', function (event) {
            switch (event.key) {
                case 'ArrowLeft':
                    if (canMove(currentShape, currentX - 1, currentY)) {
                        currentX--;
                        updateBoard();
                    }
                    break;
                case 'ArrowRight':
                    if (canMove(currentShape, currentX + 1, currentY)) {
                        currentX++;
                        updateBoard();
                    }
                    break;
                case 'ArrowDown':
                    moveDown();
                    break;
                case 'ArrowUp':
                    // 旋转方块
                    const rotatedShape = [];
                    for (let j = 0; j < currentShape[0].length; j++) {
                        const newRow = [];
                        for (let i = currentShape.length - 1; i >= 0; i--) {
                            newRow.push(currentShape[i][j]);
                        }
                        rotatedShape.push(newRow);
                    }
                    if (canMove(rotatedShape, currentX, currentY)) {
                        currentShape = rotatedShape;
                        updateBoard();
                    }
                    break;
            }
        });

        // 初始化游戏
        newShape();
        updateBoard();

        // 定时下落
        setInterval(moveDown, 500);
    </script>
</body>

</html>